/*
 * This file is part of KubeSphere Console.
 * Copyright (C) 2019 The KubeSphere Console Authors.
 *
 * KubeSphere Console is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * KubeSphere Console is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
 */

import { get } from 'lodash'
import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { Link } from 'react-router-dom'
import { Button, Column, Icon } from '@kube-design/components'
import { Text } from 'components/Base'
import { GrNodes } from 'react-icons/gr'
import NodeStore from 'stores/rank/node'

import styles from './index.scss'

const storeParams = {
  limit: 4,
  page: 1,
  sort_type: 'desc',
}
export var dict = {}
@observer
export default class NodesTop5 extends Component {
  store = new NodeStore({ ...storeParams, cluster: this.cluster })

  componentDidMount() {
    this.store.fetchAll()
  }

  get cluster() {
    return this.props.cluster
  }

  get options() {
    return this.store.sort_metric_options.map(option => ({
      value: option,
      label: t(`SORT_BY_${option.toUpperCase()}`),
    }))
  }

  get number() {
    const { data } = this.store
    // const dict = {}
    // console.log(data)
    data.map(
      node => (dict[node.node] = get(node, this.store.sort_metric_options[0]))
    )
  }

  render() {
    const { data } = this.store
    this.number
    // console.log(data)
    return (
      <div>
        <table className={styles.TableTitleList} style={{ width: '90%' }}>
          <thead>
            <tr>
              <th className={styles.Tabletitle}>节点名称</th>
              <th className={styles.Tabletitle}>CPU用量</th>
              <th className={styles.Tabletitle}>磁盘用量</th>
              <th className={styles.Tabletitle}>内存用量</th>
              <th className={styles.Tabletitle}>容器组用量</th>
            </tr>
          </thead>
          <tbody>
            {data.map(node => (
              <tr key={node.node}>
                <td className={styles.Content}>
                  <Column className={styles.firstColumn} style={{ flex: 0.32 }}>
                    {/* <GrNodes size={40} className="margin-r12" /> */}
                    <img
                      src="/assets/jizhan.svg"
                      alt=""
                      size={40}
                      className="margin-r12"
                    />
                    <Text
                      title={
                        <Link
                          to={`/clusters/${this.cluster}/nodes/${node.node}`}
                          className={styles.title}
                        >
                          {node.node}
                          {node.role === 'master' && (
                            <span className={styles.label}>
                              {t('CONTROL_PLANE')}
                            </span>
                          )}
                        </Link>
                      }
                      description={get(node, 'host_ip', '-')}
                    />
                  </Column>
                </td>
                <td className={styles.Content}>
                  <div className={styles.title}>
                    {`${Math.round(
                      (Number(get(node, this.store.sort_metric_options[0])) ||
                        0) * 100
                    )}%`}
                  </div>
                </td>
                <td className={styles.Content}>
                  <div className={styles.title}>
                    {`${Math.round(
                      (Number(get(node, this.store.sort_metric_options[3])) ||
                        0) * 100
                    )}%`}
                  </div>
                </td>
                <td className={styles.Content}>
                  <div className={styles.title}>
                    {`${Math.round(
                      (Number(get(node, this.store.sort_metric_options[2])) ||
                        0) * 100
                    )}%`}
                  </div>
                </td>
                <td className={styles.Content}>
                  <div className={styles.title}>
                    {`${Math.round(
                      (Number(get(node, this.store.sort_metric_options[5])) ||
                        0) * 100
                    )}%`}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        <div className={styles.footer}>
          <Link to={`/clusters/${this.cluster}/monitor-cluster/ranking`}>
            <Button>{t('VIEW_MORE')}</Button>
          </Link>
        </div>
      </div>
    )
  }
}
